<template>
    <div id="search">
        <!-- 这个是搜索页面，需要做的工作有1、显示搜索历史，2、显示热搜榜单3、模糊字段查询 -->
        <div class="cardTop">
            <div class="top-left">热搜榜</div>
            <div class="top-right">
                <img src="../assets/broadcast.png" />
                <span>播放全部</span>
            </div>
        </div>
        <div class="cardBody">
            <div class="bodyLeft">
                <div v-for="(item,index) in cardlists.listLeft" :key="index" >
                    <span>{{2*index+1}}</span>
                    {{item.searchWord}}
                    <img v-show="item.iconUrl!=null" :src="item.iconUrl">
                </div>
            </div>
            <div class="bodyRight">
                <div v-for="(item,index) in cardlists.listRight" :key="index" >
                    <span>{{2*(index+1)}}</span>
                    {{item.searchWord}}
                    <img v-show="item.iconUrl!=null" :src="item.iconUrl">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'search',
    data:function(){
        return {
            cardlists:{
                listLeft:[],
                listRight:[]
            },
        }
    },
    async created(){
        //获取热搜榜的数据
        const CardData=await this.$http.get('http://localhost:3000/search/hot/detail');
        //将获取的数据进行过滤，奇数放在listLeft中
        this.cardlists.listLeft=CardData.data.data.filter((val,index)=>(index+1)%2==1);
        //偶数放在listLeft中
         this.cardlists.listRight=CardData.data.data.filter((val,index)=>(index+1)%2==0);
    },
    methods:{

    }
}
</script>

<style lang="stylus" scoped>
    #search
        position absolute
        width 100%
        top 50px
    .cardTop
        width 90%
        display flex
        flex-direction row
        justify-content space-between
        align-items center
        margin 20px auto
        border-bottom 1px solid #eeeeee
        .top-left
            font-size 16px
            color #363636
            padding 10px 
            font-weight 800
        .top-right
            display flex
            flex-direction row
            justify-content center
            align-items center
            font-size 10px
            color #363636
            padding 5px
            margin 5px
            border 1px solid #aaaaaa
            border-radius 10px
            img 
                width 10px
                height 10px
    .cardBody
        display table
        width 100%
        box-sizing border-box
        padding-left 20px
        font-size 13px
        .bodyLeft
            display table-cell
        .bodyRight
            display table-cell
    .cardBody
        div
            padding-bottom 15px
            span
                text-align center
            img 
                width 20px
                height 10px        
</style>